<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <title>钱包</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        html, body {
            background-color: #fff;
            font-family: PingFangSC-Regular;
        }
        .money {
            margin: .1rem .16rem 0 .16rem;
            height: 1.97rem;
            background-image: url(https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/wallet_bg.png);
            background-size: 100% 100%;
        }

        .balance {
            display: flex;
            flex-flow: column;
            padding: .25rem .25rem 0 .30rem;
            height: 1.97rem;
        }

        .withdrawal {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .withdrawal-amount {
            display: flex;
            flex-flow: column;
            font-size: .14rem;
            color: rgba(255, 255, 255, .64);
        }

        .withdrawal-money {
            display: flex;
            align-items: flex-end;
            height: .35rem;
            color: #FFFFFF;
        }

        .symbol {
            font-size: .2rem;
            line-height: .2rem;
            height: .22rem;
        }

        .withdrawal-count {
            font-size: .30rem;
            font-weight: 500;
            line-height: .30rem;
        }

        .withdrawalBtn {
            background-color: #fff;
            height: .32rem;
            width: 1rem;
            border-radius: .16rem;
            line-height: .32rem;
            font-size: .14rem;
            font-weight: 700;
            text-align: center;
            color: #C7000B;
        }

        .frozen-amount {
            margin-top: .27rem;
        }

        .frozen-title {
            display: flex;
            align-items: center;
        }

        .frozen-explain {
            margin-left: .07rem;
            width: .15rem;
            height: .15rem;
            background-image: url(https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/questionMark.png);
            background-size: 100% 100%;
        }

        .wallet-title {
            padding: .20rem 0 0 .16rem;
            height: .25rem;
            color: #999;
            font-size: .16rem;
            font-weight: 500;
            line-height: .16rem;
        }

        .wallet-item {
            display: flex;
            flex-flow: column;
            margin: 0 .16rem 0 .16rem;
            height: .74rem;
            border-bottom: .005rem solid rgba(0, 0, 0, .1);
        }

        .item-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: .16rem;
            color: #333;
            font-size: .14rem;
            font-weight: 700;
            line-height: .14rem;
            height: .18rem;
        }

        .item-money-red {
            color: #C7000B;
            font-size: .16rem;
            line-height: .16rem;
        }

        .item-money-green {
            color: #41AF8C;
            font-size: .16rem;
            line-height: .16rem;
        }

        .item-bottom {
            margin-top: .12rem;
        }

        .item-desc {
            color: #999;
            font-size: .12rem;
            line-height: .12rem;
            font-weight: 400;
        }

        .popoup {
            display: flex;
            flex-flow: column;
            align-items: center;
            border-radius: .05rem;
        }
        .popoup-title {
            display: flex;
            justify-content: center;
            padding: .2rem .15rem 0 .15rem;
            height: .2rem;
            font-size: .18rem;
            color: #162641;
            line-height: .18rem;
        }

        .popoup-content {
            color:#727D8B;
            font-size: .15rem;
            margin: .10rem .15rem 0 .15rem;
            line-height: .25rem;
            height: .45rem;
            
        }

        .popoup-desc {
            color: #999;
            font-size: .14rem;
            margin: .12rem .15rem 0 .15rem;
            line-height: .22rem;
        }
        .popoup-confirm {
            width: 100%;
            height: .44rem;
            border-top: .005rem solid #EBEBEB;
            margin-top: .15rem;
            color: #F33C2A;
            font-size: .16rem;
            line-height: .44rem;
            text-align: center;
        }

        .withdrawalPopoup-content {
            color:#727D8B;
            font-size: .15rem;
            line-height: .70rem;
            width: 100%;
            height: .70rem;
            text-align: center;
            border-bottom: .005rem solid #F0F0F0;
        }

        .popoup-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: .44rem;
        }

        .popoup-cancel {
            color: #666666;
            font-size: .16rem;
            line-height: .44rem;
            font-weight: 700;
            text-align: center;
            height: .44rem;
            width: 50%;
        }

        .withdrawal-confirm {
            color: #F33C2A;
            border-left: .005rem solid #F0F0F0;
        }

        .wallet-empty {
            color: #999;
            font-size: .16rem;
            font-weight: 400;
            line-height: .30rem;
            text-align: center;
            height: .30rem;
        }

        .home-no-login-pop .confirm{
            width: 100%;
        }

    </style>
</head>
<body>
<div class="app" v-cloak>
    <div class="money">
        <div class="balance">
             <div class="withdrawal">
                 <div class="withdrawal-amount">
                    <div>可提现金额</div>
                    <div class="withdrawal-money">
                        <div class="symbol">￥</div>
                        <div class="withdrawal-count">{{walletInfo.canWithdrawAmount}}</div>
                    </div>
                 </div>
                 <div class="withdrawalBtn" @click='getWithdrawal'>提现</div>
             </div>
             <div class="frozen">
                 <div class="withdrawal-amount frozen-amount">
                     <div class="frozen-title">
                        <div>冻结金额</div>
                        <div class="frozen-explain" @click='getFrozenExplain'></div>
                     </div>
                 </div>
                 <div class="withdrawal-money">
                    <div class="symbol">￥</div>
                    <div class="withdrawal-count">{{walletInfo.freezeAmount}}</div>
                 </div>
             </div>
        </div>
    </div>

    <div class="wallet-title">钱包明细</div>

    <div class="wallet-detail">
        <div class="wallet-list" v-if="walletList&&walletList.length>0">
            <div class="wallet-item" v-for="(item, index) in walletList" :key="index">
                
                <div class="item-top">
                    <div class="item-title">{{item.title}}</div>
                    <div :class= "item.amount>0?'item-money-green':'item-money-red'">{{item.amount | handleAmount}}</div>
                </div>
                <div class="item-top item-bottom">
                    <div class="item-desc">{{item.content}}</div>
                    <div class="item-desc">{{item.createTime | handleTime}}</div>
                </div>
                
            </div>
        </div>

        <div v-else class="wallet-empty">
            <div>暂无数据～</div>
        </div>
    </div>

    <van-popup class="popoup" v-model="showFrozen" :style="{ height: '2.13rem', width: '2.70rem'}">
        <div class="popoup-title">
            <div>什么是冻结金额？</div>
        </div>
        <div class="popoup-content">指被邀请用户已注册还未认证，认证后即可提现~</div>
        <div class="popoup-content popoup-desc">提示：前往【邀请好友】-【邀请列表】可查看被邀请好友是否认证</div>
        <div class="popoup-confirm" @click='popoupConfirm'>我知道了</div>
    </van-popup>

    <!-- 未认证弹窗 -->
    <van-popup v-model="showNoAuthPop" :style="{ height: 'auto',width:'80%' }" class="home-no-login-pop">
        <div class="top">
            温馨提示
            <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/circle_comment_close_ico.png" alt="" width="14" height="14"
                @click="showNoAuthPop=false">
        </div>
        <div class="content">
            平台严格遵守《网络安全法》,实名认证后可使用提现、支付等功能
        </div> 
        <div class="btn-container">
            <button class="confirm" @click="goAuth()">去认证</button>
        </div>      
    </van-popup>

    <van-popup class="popoup" v-model="showWithdrawal" :style="{ height: '1.15rem', width: '2.70rem'}">
        
        <div class="withdrawalPopoup-content">
            <div>是否提现当前全部金额？</div>
        </div>
        <div class="popoup-bottom">
            <div class="popoup-cancel" @click='popoupCanale'>取消</div>
            <div class="popoup-cancel withdrawal-confirm" @click='popoupConfirmWithdrawal'>确定</div>
        </div>
        
    </van-popup>

</div>
<script src="../../script/api.js"></script>
<script src="../../script/flexible.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/vue.min.js"></script>
<script src="../../script/iconfont.js"></script>
<script src="../../script/vant.min.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/restful.js"></script>
<script src="../../script/businessCommon.js"></script>
<script src="../../script/BigPicture.js"></script>
<script>
    apiready = function () {
        vm = new Vue({
            el: '.app',
            data: {
                    showToast: false,
                    toastText: '',
                    showFrozen: false,
                    showWithdrawal: false,
                    showNoAuthPop: false,
                    walletInfo: {
                    },
                    
                    walletList: [],
                    // 个人认证 商家认证
                    authStatus: {
                        merchant: '',
                        personal: ''
                    },
                },
                filters: {
                    handleTime(timestamp) {
                        if (!timestamp) {
                            return ''
                        }
                        var date = new Date(timestamp);
                        Y = date.getFullYear();
                        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                        D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
                        h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours());
                        m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
                        // s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
                        // return Y + '.' + M + '.' + D + ' ' + h + ':' + m + ':' + s
                        return Y + '-' + M + '-' + D + ' ' + h + ':' + m;

                    },

                    handleAmount(amount) {
                        let newAmount;
                        if(amount > 0) {
                           newAmount  = '+' + amount.toString();
                        } else {
                            newAmount = amount;
                        }

                        return newAmount;
                    }
                },
            mounted: function () {
                this.getUserWallet();
                this.getUserWalletLog();
                this.getAuthorizationStatus();
            },
            methods: {
                // 获取用户钱包汇总
                getUserWallet() {
                    let vm = this;
                    mime('getUserWalletInfo')(function(ret) {
                        // console.log("@@:" + JSON.stringify(ret))
                        vm.walletInfo = ret.data;
                    })
                },
                // 钱包明细
                getUserWalletLog() {
                    let vm = this;
                    mime('getUserWalletLog')(function(ret) {
                        // console.log("@@:" + JSON.stringify(ret))
                        vm.walletList = ret.data;
                    })
                },
                // 认证状态
                getAuthorizationStatus() {
                    let vm = this
                    mime("getAuthorizationStatus")(function (ret) {
                        console.log("@@:" + JSON.stringify(ret))
                        vm.authStatus.merchant = ret.data.merchant
                        vm.authStatus.personal = ret.data.personal
                    })
                },
                // 提现
                getWithdrawal() {
                    let vm = this;
                    if (vm.authStatus.merchant != 1 && vm.authStatus.personal != 1) {
                        vm.showNoAuthPop = true;
                    } else if (vm.walletInfo.canWithdrawAmount > 0) {
                        vm.showWithdrawal = true;
                    } else {
                        toastMiddle('暂无可提现金额');
                    }

                },

                getFrozenExplain() {
                    this.showFrozen = true;
                },

                popoupConfirm() {
                    this.showFrozen = false;
                },

                popoupCanale() {
                    this.showWithdrawal = false;
                },
                // 确定提现
                popoupConfirmWithdrawal() {
                    this.showWithdrawal = false;
                    mime('walletWithdral')(function(ret) {
                        console.log("@@:" + JSON.stringify(ret))
                        api.openWin({ 
                            name: 'mine_withdrawal_win',
                            url: 'mine_withdrawal_win.html',
                            bounces: false,
                            pageParam: {
                                title: '提现',
                            }
                        });
                    })
                },
                // 去认证
                goAuth() {
                    this.showNoAuthPop = false;
                    api.openWin({ 
                        name: 'personal_certification_win',
                        url: 'personal_certification_win.html',
                        bounces: false,
                        pageParam: {
                            
                        }
                    });
                }
            },
        });

        api.addEventListener({
            name:'withdrawal_finish'
        }, function(ret){
            vm.getUserWallet();
            vm.getUserWalletLog();
        });


    }
</script>
</body>
</html>
